<!--
 * @Author: WangGuojian 1085844536@qq.com
 * @Date: 2023-09-02 10:44:59
 * @LastEditTime: 2023-09-07 18:31:22
 * @LastEditors: WangGuojian 1085844536@qq.com
 * @FilePath: \htmld:\Developer\WGJ\VSCode_WorkSpace\Web\vue\vue_test\src\App.vue
 * @Description:
-->
<template>
    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
        <School ref="sch" />
    </div>
</template>

<script>
// 引入组件
import School from './components/School.vue';

export default {
    name: 'App',
    data() {
        return {
            msg: '欢迎学习Vue!',
        };
    },
    components: {
        School,
    },
    methods: {
        showDOM() {
            console.log(this.$refs.title); // 真实 DOM 元素
            console.log(this.$refs.btn); // 真实DOM元素
            console.log(this.$refs.sch); // School组件的实例对象
        },
    },
};
</script>
